import React, { useContext } from 'react'
import { titleContext } from './context'

const First = () => {
    return (<>
        <h1>First</h1>

        {/* 通过 Consumer 可以获取到祖先组件传递的数据，但是太复杂 */}
        {
            <titleContext.Consumer>
                {
                    (value) => {
                        return <p>{value.title} --- {value.msg}</p>
                    }
                }
            </titleContext.Consumer>
        }

        <Son />
    </>)
}

const Son = () => {

    // useContext 该方法是用来接收祖先组件通过 Provider 传递参数用的
    // useContext 该 hooks 中有一个参数就是我们的 Context 返回值为结果
    const obj = useContext(titleContext)

    return (<>
        <h1>Son</h1>
        <p> {obj.title} --- {obj.msg} </p>
    </>)
}


export default function App() {
    return (
        <div>
            <titleContext.Provider value={{
                title: '传家宝',
                msg: '你好世界'
            }}>
                <First />
            </titleContext.Provider>

        </div>
    )
}
